<header>
    <h1>Invite staff users</h1>
    <p>Ghost works best when shared with others. Collaborate, get feedback on your posts &amp; work together on ideas.</p>
</header>

<div><img class="gh-flow-faces" src="assets/img/users.png" alt="" /></div>

<form class="gh-flow-invite" {{action "invite" on="submit"}}>
    {{#gh-form-group errors=errors hasValidated=hasValidated property="users"}}
        <label for="users">Enter one email address per line, we’ll handle the rest! {{svg-jar "email"}}</label>
        {{gh-textarea
            name="users"
            required="required"
            value=(readonly users)
            input=(action (mut users) value="target.value")
            focus-out=(action "validate")
        }}
    {{/gh-form-group}}

    {{#gh-task-button
        task=invite
        type="submit"
        classNameBindings=":gh-btn :gh-btn-default :gh-btn-lg :gh-btn-block buttonClass"
        successClass=""
        failureClass=""
        as |task|
    }}
        <span>
            {{#if task.isRunning}}
                {{svg-jar "spinner" class="no-margin"}}
            {{else}}
                {{buttonText}}
            {{/if}}
        </span>
    {{/gh-task-button}}
</form>

<button class="gh-flow-skip" {{action "skipInvite"}}>
    I'll do this later, take me to my site!
</button>
